<template>
  <view class="menu">
    <view class="search-box">
      <search></search>
    </view>
    <view class="menu-tab">
      <view class="tab-item" v-for="tab in tabs" :key="tab.icon" @click="tabHandler(tab)">
        <view class="tab-icon">
          <image :src="tab.active?tab.iconActive:tab.icon" mode=""></image>
        </view>
        <view class="tab-title" :style="tab.active?'color:#0934b9':''">
          {{tab.title}}
        </view>
      </view>
    </view>
    <view class="menu-box">
		<!-- [] 相当于 .  -->
      <view class="menu-list" @click="gotoDetail(menu['pid'])" v-for="menu in goodsList" :key="menu['pid']">
        <view class="list-l">
          <image :src="menu['smallImg']">
          </image>
          <view class="menu-info">
            <view class="coffee-name">
              {{menu['name']}}
            </view>
            <view class="coffee-name-en">
              {{menu['enname']}}
            </view>
          </view>
        </view>
        <view class="list-r">
          <view class="coffee-price">
            ￥ {{menu['price']}}
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import {
    req
  } from "../utils/request/request.js"
  import search from "../../components/search/search.vue"
  export default {
    components: {
      search
    },
    data() {
      return {
        tabs: [{
          icon: "../../static/icons/icons_09.gif",
          title: "推荐",
          iconActive: "../../static/icons/icons_21.gif",
          active: true,
          value: 'isHot'
        }, {
          icon: "../../static/icons/icons_05.gif",
          title: "拿铁",
          iconActive: "../../static/icons/icons_19.gif",
          active: false,
          value: 'latte'
        }, {
          icon: "../../static/icons/icons_03.gif",
          title: "咖啡",
          iconActive: "../../static/icons/icons_18.gif",
          active: false,
          value: 'coffee'
        }, {
          icon: "../../static/icons/icons_07.gif",
          title: "瑞纳冰",
          iconActive: "../../static/icons/icons_20.gif",
          active: false,
          value: 'rena_ice'
        }],
        goodsList: [],
      }
    },
    watch: {
      type: {
        deep: true,
        handler() {
          console.log(1);
          this.getDiffTypeGoods(this.type)
        }
      }
    },
    onLoad() {
      this.getDiffTypeGoods({
        key: "isHot",
        value: 1
      })
    },
    methods: {
      gotoDetail(pid) {
        uni.navigateTo({
          url: '/pages/goods_detail/goods_detail?wd=' + pid
        })
      },
      getDiffTypeGoods(typeObj) {
        req('typeProducts', {
          reqData: {
            ...typeObj
          }
        }).then(({
          data: res
        }) => {
          this.goodsList = res.result
        }, err => {
          console.log(err);
        })
      },
      tabHandler(tab) {
        this.tabs.forEach(e => {
          e.active = false
          if (e.title === tab.title) {
            e.active = true
            if (e.title === '推荐') {
              this.getDiffTypeGoods({
                key: "isHot",
                value: 1
              })
              return
            }
            this.getDiffTypeGoods({
              key: 'type',
              value: e['value']
            })

          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  page {
    padding-bottom: 70rpx;
  }

  .menu {
    background-color: #f7f7f7;
    position: relative;

    .search-box {
      padding: 20rpx;
      background-color: #fff;
      position: fixed;
      left: 0;
      right: 0;
      z-index: 2
    }

    .menu-box {
      padding: 0 20rpx;
      margin-top: 10rpx;

      .menu-list {
        display: flex;
        padding: 20rpx;
        background-color: #fff;
        border-radius: 20rpx;
        margin-bottom: 20rpx;
        justify-content: space-between;

        .list-r {
          display: flex;
          align-items: center;

          .coffee-price {
            color: #0c34ba;
            font-weight: bold;
          }
        }

        .list-l {
          display: flex;
          align-items: center;

          .menu-info {
            color: #646562;
            margin-left: 20rpx;
            font-size: 26rpx;

            .coffee-name,
            .coffee-name-en {
              padding: 5rpx 0;
              width: 300rpx;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          image {
            height: 200rpx;
            width: 200rpx;
            object-fit: cover;
          }
        }
      }
    }

    .menu-tab {
      display: flex;
      justify-content: space-around;
      padding: 20rpx 0;
      padding-bottom: 10rpx;
      padding-top: 150rpx;

      .tab-item {
        display: flex;
        flex-direction: column;
        align-items: center;

        .tab-title {
          font-size: 28rpx
        }

        .tab-icon {
          height: 80rpx;
          width: 80rpx;

          image {
            height: 100%;
            width: 100%;
          }
        }
      }
    }
  }
</style>
